//商品详情中的  相关分类
Vue.component("goods_leftbar_wrap_type", {
    template: `
    <div class="leftbar_wrap">
                    <ul>
                        <li><a href="">笔记本</a></li>
                        <li><a href="">超极本</a></li>
                        <li><a href="">平板电脑</a></li>
                    </ul>
                </div>
    `,
    created() {

    },
    data() {
        return {}

    },
    methods: {}
})

// 商品详情中的 同类品牌
Vue.component("goods_leftbar_wrap_brand", {
    template: `<div class="leftbar_wrap">
                    <ul>
                        <li><a href="">D-Link</a></li>
                        <li><a href="">戴尔</a></li>
                        <li><a href="">惠普</a></li>
                        <li><a href="">苹果</a></li>
                        <li><a href="">华硕</a></li>
                        <li><a href="">宏基</a></li>
                        <li><a href="">神舟</a></li>
                    </ul>
                </div>`,
    data() {
        return {}

    },
    created() {

    },
    methods: {}
})

// 商品详情中的 热销排行榜
Vue.component("goods_hotgoods", {
    template: `
    <div class="leftbar_wrap">
                    <ul>
                        <li></li>
                    </ul>
                </div>
    `,
    data() {
        return {}

    },
    created() {

    },
    methods: {}
})

// 商品详情中的 浏览了该商品的用户还浏览了
Vue.component("goods_recommend", {
    template: ` <div class="leftbar_wrap">
                    <ul>
                        <li v-for="good in goodsInfo">
                            <dl>
                                <dt><a :href="'/goods.html?id='+good.id"><img :src="good.logo" alt=""/></a></dt>
                                <dd><a :href="'/goods.html?id='+good.id">{{good.goods_name}}</a></dd>
                                <dd><strong>{{good.price}}</strong></dd>
                            </dl>
                        </li>
                    </ul>
                </div>`,
    data() {
        return {
            goodsInfo: []
        }
    },
    created() {
        getRecommendGoods().then(res => {
            this.goodsInfo = res.data.data
        })
    },
    methods: {}
})

// 商品详情中的 最近浏览
Vue.component("goods_recently_visit", {
    template: `
    <div className="leftbar_wrap">
                    <dl>
                        <dt><a href=""><img src="images/hpG4.jpg" alt=""/></a></dt>
                        <dd><a href="">惠普G4-1332TX 14英寸笔记...</a></dd>
                    </dl>

                    <dl className="last">
                        <dt><a href=""><img src="images/crazy4.jpg" alt=""/></a></dt>
                        <dd><a href="">直降200元！TCL正1.5匹空调</a></dd>
                    </dl>
                </div>`,
    data() {
        return {}

    },
    created() {

    },
    methods: {}
})

// 商品详情中的 商品评论
Vue.component("goods_comment", {
    template: ` <div class="comment detail_div mt10">
                        <div class="comment_summary">
                            <div class="rate fl">
                                <strong><em>90</em>%</strong> <br/>
                                <span>好评度</span>
                            </div>
                            <div class="percent fl">
                                <dl>
                                    <dt>好评（90%）</dt>
                                    <dd>
                                        <div style="width:90px;"></div>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>中评（5%）</dt>
                                    <dd>
                                        <div style="width:5px;"></div>
                                    </dd>
                                </dl>
                                <dl>
                                    <dt>差评（5%）</dt>
                                    <dd>
                                        <div style="width:5px;"></div>
                                    </dd>
                                </dl>
                            </div>
                            <div class="buyer fl">
                                <dl>
                                    <dt >买家印象：</dt>
                                    <dd v-for="impressions in goods_discuss.impressions">
                                    <span>{{impressions.title}}</span><em>({{impressions.count}})</em>
                                    </dd>
                                  
                                </dl>
                            </div>
                        </div>

                        <div  v-for="(comments,k) in goods_discuss.comments"  class="comment_items mt10">
                            <div class="user_pic">
                                <dl>
                                    <dt><a href=""><img :src="comments.user.face" alt=""/></a></dt>
                                    <dd><a href="">{{comments.user.name}}</a></dd>
                                </dl>
                            </div>
                            <div class="item">
                                <div class="title">
                                    <span>{{comments.created_at}}</span>
                                    <strong :class="['star','star'+k]"></strong> <!-- star5表示5星级 start4表示4星级，以此类推 -->
                                </div>
                                <div class="comment_content">
                                    <dl>
                                        <dt>心得：</dt>
                                        <dd>{{comments.content}}</dd>
                                    </dl>
                                   
                                    <dl>
                                        <dt>购买日期：</dt>
                                        <dd>{{comments.created_at}}</dd>
                                    </dl>
                                </div>
                                <div class="btns">
                                    <a href="" class="reply">回复(0)</a>
                                    <a href="" class="useful">有用(0)</a>
                                </div>
                            </div>
                            <div class="cornor"></div>
                        </div>

                      
                        <!-- 分页信息 start -->
                        <div class="page mt20">
                            <a href="">首页</a>
                            <a href="">上一页</a>
                            <a href="">1</a>
                            <a href="">2</a>
                            <a href="" class="cur">3</a>
                            <a href="">4</a>
                            <a href="">5</a>
                            <a href="">下一页</a>
                            <a href="">尾页</a>
                        </div>
                        <!-- 分页信息 end -->

                        <!--  评论表单 start-->
                        <div class="comment_form mt20">
                            <form action="">
                                <ul>
                                    <li>
                                        <label for=""> 评分：</label>
                                        <input type="radio" name="grade"/> <strong class="star star5"></strong>
                                        <input type="radio" name="grade"/> <strong class="star star4"></strong>
                                        <input type="radio" name="grade"/> <strong class="star star3"></strong>
                                        <input type="radio" name="grade"/> <strong class="star star2"></strong>
                                        <input type="radio" name="grade"/> <strong class="star star1"></strong>
                                    </li>

                                    <li>
                                        <label for="">评价内容：</label>
                                        <textarea name="" id="" cols="" rows=""></textarea>
                                    </li>
                                    <li>
                                        <label for="">&nbsp;</label>
                                        <input type="submit" value="提交评论" class="comment_btn"/>
                                    </li>
                                </ul>
                            </form>
                        </div>
                        <!--  评论表单 end-->

                    </div>`,
    data() {
        return {
            goods_discuss: {},
        }

    },
    created() {
        getComments().then(res => {
            this.goods_discuss = res.data

        })

    },
    methods: {}
})

//商品详情中的 售后保障
Vue.component("goods_after_sale", {
    template: ` <div class="after_sale mt15 none detail_div">
                        <div>
                            <p>本产品全国联保，享受三包服务，质保期为：一年质保 <br/>如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！
                            </p>
                            <p>售后服务电话：800-898-9006 <br/>品牌官方网站：http://www.lenovo.com.cn/</p>

                        </div>

                        <div>
                            <h3>服务承诺：</h3>
                            <p>
                                本商城向您保证所售商品均为正品行货，京东自营商品自带机打发票，与商品一起寄送。凭质保证书及京东商城发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由本商城联系保修，享受法定三包售后服务），与您亲临商场选购的商品享受相同的质量保证。本商城还为您提供具有竞争力的商品价格和运费政策，请您放心购买！</p>

                            <p>
                                注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！</p>

                        </div>

                        <div>
                            <h3>权利声明：</h3>
                            <p>本商城上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东商城重要的经营资源，未经许可，禁止非法转载使用。</p>
                            <p>注：本站商品信息均来自于厂商，其真实性、准确性和合法性由信息拥有者（厂商）负责。本站不提供任何保证，并不承担任何法律责任。</p>

                        </div>
                    </div>`,
    data() {
        return {}

    },
    created() {

    },
    methods: {}
})

//商品详情中的 商品介绍
Vue.component("goods_introduce", {
    template: ` <div class="introduce detail_div none">
                        <div class="attr mt15">
                            <ul>
                                <li><span>商品名称：</span>ThinkPadX230(2306 3T4）</li>
                                <li><span>商品编号：</span>979631</li>
                                <li><span>品牌：</span>联想（Thinkpad）</li>
                                <li><span>上架时间：</span>2013-09-18 17:58:12</li>
                                <li><span>商品毛重：</span>2.47kg</li>
                                <li><span>商品产地：</span>中国大陆</li>
                                <li><span>显卡：</span>集成显卡</li>
                                <li><span>触控：</span>非触控</li>
                                <li><span>厚度：</span>正常厚度（>25mm）</li>
                                <li><span>处理器：</span>Intel i5</li>
                                <li><span>尺寸：</span>12英寸</li>
                            </ul>
                        </div>

                        <div class="desc mt10">
                            <!-- 此处的内容 一般是通过在线编辑器添加保存到数据库，然后直接从数据库中读出 -->
                            <img src="images/desc1.jpg" alt=""/>
                            <p style="height:10px;"></p>
                            <img src="images/desc2.jpg" alt=""/>
                            <p style="height:10px;"></p>
                            <img src="images/desc3.jpg" alt=""/>
                            <p style="height:10px;"></p>
                            <img src="images/desc4.jpg" alt=""/>
                            <p style="height:10px;"></p>
                            <img src="images/desc5.jpg" alt=""/>
                            <p style="height:10px;"></p>
                            <img src="images/desc6.jpg" alt=""/>
                            <p style="height:10px;"></p>
                            <img src="images/desc7.jpg" alt=""/>
                            <p style="height:10px;"></p>
                            <img src="images/desc8.jpg" alt=""/>
                            <p style="height:10px;"></p>
                            <img src="images/desc9.jpg" alt=""/>
                        </div>
                    </div>`,
    props: ['goods-introduce'],
    data() {
        return {}

    },
    created() {

    },
    methods: {}
})

// 商品详情中的  图片预览区域
Vue.component("goods_preview", {
    template: `<div class="preview fl">
                    <div class="midpic">

                        <a :href="logo.xbiglogo" class="jqzoom" rel="gal1">   <!-- 第一幅图片的大图 class 和 rel属性不能更改 -->
                            <img :src="logo.biglogo" alt=""/>               <!-- 第一幅图片的中图 -->
                        </a>
                    <!--使用说明：此处的预览图效果有三种类型的图片，大图，中图，和小图，取得图片之后，分配到模板的时候，把第一幅图片分配到 上面的midpic 中，其中大图分配到 a 标签的href属性，中图分配到 img 的src上。 下面的smallpic 则表示小图区域，格式固定，在 a 标签的 rel属性中，分别指定了中图（smallimage）和大图（largeimage），img标签则显示小图，按此格式循环生成即可，但在第一个li上，要加上cur类，同时在第一个li 的a标签中，添加类 zoomThumbActive  -->

                </div>
              
                    <div class="smallpic">
                        <a href="javascript:;" id="backward" class="off"></a>
                        <a href="javascript:;" id="forward" class="on"></a>
                        <div class="smallpic_wrap">
                            <ul>
                     
                                <li :class="{cur:k==0}" v-for="(photo,k) in photos">
                                <!--:href="'goods.html?id='+v.id"-->
                                    <a href="javascript:void(0);"
                                       :rel="relData(k)"><img
                                       :src="photo.bigimg"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
</div>`,
    props: ['logo', 'photos'],
    data() {
        return {

        }
    },
    computed: {},
    updated() {



        //商品缩略图左右移动效果
        //点击后退
        $("#backward").click(function () {
            var left = parseInt($(".smallpic_wrap ul").css("left")); //获取ul水平方向偏移量
            var offset = left + 62;
            if (offset <= 0) {
                $(".smallpic_wrap ul").stop(true, false).animate({left: offset}, "slow", '', function () {
                    //动画完成之后，判断是否到了左边缘
                    if (parseInt($(".smallpic_wrap ul").css("left")) >= 0) {
                        $("#backward").removeClass("on").addClass("off");
                    }
                });
                //开启右边的按钮
                $("#forward").removeClass("off").addClass("on");
            }

            $(this).blur(); //去除ie 虚边框
        });

        //点击前进
        $("#forward").click(function () {
            var left = parseInt($(".smallpic_wrap ul").css("left")); //获取ul水平方向偏移量
            var len = $(".smallpic_wrap li").size() * 62; //获取图片的整体宽度(图片数 * 图片宽度)558
            var offset = left - 62;
            if (offset >= -(len - 62 * 5)) {
                $(".smallpic_wrap ul").stop(true, false).animate({left: offset}, "slow", '', function () {
                    //判断是否到了右边缘
                    if (parseInt($(".smallpic_wrap ul").css("left")) <= -(len - 62 * 5)) {
                        $("#forward").removeClass("on").addClass("off");
                    }
                });
                //开启左边的按钮
                $("#backward").addClass("on").removeClass("off");

            }

            $(this).blur(); //去除ie 虚边框
        });


    },
    methods: {
        //动态生成 列表图片
        relData: function (k) {
            if (k == null) {
                k = 0
            }


            var str = "{gallery: 'gal1' ," + "smallimage: " + "'" + this.photos[k].bigimg + "'" + ", largeimage: " + "'" + this.photos[k].xbigimg + "'" + "}"

            return str
        },
    }
})